import React, { useEffect, useState } from 'react';
import { http } from '../../utils/functions/http';
import { useAsync } from '../../utils/hooks/useAsync';

export const UseHttpDemo = () => {
  const { run: fetchData, data, loading: fetchLoading, error: fetchError } = useAsync();
  const { run, loading: postLoading, error: postError } = useAsync();
  useEffect(() => {
    fetchData(http('users/2'));
  }, []);
  return (
    <div>
      <div>
        <button
          type="button"
          onClick={e => {
            run(
              http('users', {
                method: 'POST',
                data: {
                  // name: '姓名',
                },
              })
            );
          }}
        >
          {postLoading ? 'loading...' : '添加'}
        </button>
      </div>
      {fetchLoading ? (
        'loading...'
      ) : fetchError ? (
        <p style={{ color: 'red' }}>{fetchError.message}</p>
      ) : (
        <div>{JSON.stringify(data)}</div>
      )}
    </div>
  );
};
